<template>
  <div>
    <div class="node" v-has="{action: 'admin:user:list', effect: 'move'}">
    <div class="search_box topSelect">
      <SearchInput
        placeholder="用户名称"
        label="用户名称"
        style="margin-right:20px"
        :value="name"
        :onChange="(val) => changeSearch('name',val)"
        :onBlur="queryData"
      />
      <div class="selectBox">
        <label>状态：</label>
        <el-select
          v-model="state"
          clearable
          placeholder="请选择"
        >
          <el-option label="正常" :value="1"></el-option>
          <el-option label="停用" :value="0"></el-option>
        </el-select>
      </div>
      <div class="searchBox1" style="margin-left: 20px">
        <el-button size="small" plain icon="el-icon-search" @click="queryData">查询</el-button>        
      </div>
    </div>
    <Panel title="用户管理">
      <div slot='ext' class="examine">
        <el-button v-has="{action: 'admin:user:add', effect: 'move'}" class="button-offt" type="success" icon="el-icon-plus" @click="()=>edit()">新增</el-button>
    </div>
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    <template slot="operation" slot-scope="operation">
          <el-button size="mini" icon="el-icon-edit"
            v-has="{action: 'admin:user:update', effect: 'move'}"
            @click="()=>edit(operation.row)"
          >编辑</el-button>
         <!-- <el-button
            v-has="{action: 'admin:user:update', effect: 'move'}"
            type="text"
            @click="()=>editPass(operation.row)"
          >修改密码</el-button> -->
          <el-button  size="mini" type="danger" icon="el-icon-delete"
            v-has="{action: 'admin:user:delete', effect: 'move'}"
            @click="()=>remove(operation.row.id)"
          >删除</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>

    <ModalPanel
     :visible='visible'
      title="添加/编辑"
      :onCancel="onCancel"
      class="bannerDialog"
      :onOk="onSubmit">
      <ModifyForm
        :hiddenBtn='true'
        :editColumn='editColumn'
        :updateData="updateData"
        labelWidth='100px'
        ref="configModal"
        class="ModifyForm"
        :temporaryData='modalData'>
      </ModifyForm>
    </ModalPanel>
    <ModalPanel
     :visible='visible1'
      title="修改密码"
      :onCancel="onCancelPass"
      class="bannerDialog"
      :onOk="onSubmitPass">
      <ModifyForm
        :hiddenBtn='true'
        :editColumn='editColumnPass'
        :updateData="updateDataPass"
        labelWidth='100px'
        ref="configModalPass"
        class="ModifyForm"
        :temporaryData='modalData1'>
      </ModifyForm>
    </ModalPanel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'admin:user:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import { objectFilter } from "@/tools/array";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
export default {
  name: "sysUser",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    ModalPanel,
    ModifyForm
  },
  data() {
    return {
      visible:false,
      modalData: {},
      tableData: [],
      modalData1: [],
      visible1: false,
       pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      name: '',
      operation: true,
      state: '',
      name: '',
      editColumn:[],
      genre: [
        {
          name: "登录名称",
          type: "text",
          prop: "username",
          width: 24,
          required:true,
        },
        // {
        //   name: "手机号",
        //   type: "text",
        //   prop: "phone",
        //   width: 24,
        //   required:true,
        // },
        // {
        //   name: "真实姓名",
        //   type: "text",
        //   prop: "nick",
        //   width: 24,
        //   required:true,
        // },
        // {
        //   name: "状态",
        //   type: "select",
        //   prop: "state",
        //   width: 24,
        //   optionList: [
        //     {name: '启用',value: 1},
        //     {name: '停用',value: 0}
        //   ],
        //   onChange(){
        //   },
        //   required:true,
        // },
        // {
        //   name: "部门",
        //   type: "select",
        //   prop: "deptId",
        //   width: 24,
        //   optionBindLabel: 'name',
        //   optionBindValue: 'id',
        //   optionList: [],
        //   onChange(){
        //   },
        //   required:true,
        // },
        {
          name: "角色",
          type: "select",
          prop: "roleId",
          width: 24,
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [
          ],
          onChange(){
          },
          required:true,
        },
        // {
        //   name: "集团",
        //   type: "select",
        //   prop: "groupId",
        //   width: 24,
        //   optionBindLabel: 'name',
        //   optionBindValue: 'id',
        //   optionList: [],
        //   onChange(){
        //   },
        //   required:false,
        // },
        {
          name: "登录密码",
          type: "text",
          prop: "password",
          width: 24,
          required:true,
        },
      ],
      genre1: [
        {
          name: "登录名称",
          type: "text",
          prop: "username",
          width: 24,
          required:true,
        },
        {
          name: "手机号",
          type: "text",
          prop: "phone",
          width: 24,
          required:true,
        },
        {
          name: "真实姓名",
          type: "text",
          prop: "nick",
          width: 24,
          required:true,
        },
        {
          name: "状态",
          type: "select",
          prop: "state",
          width: 24,
          optionList: [
            {name: '启用',value: 1},
            {name: '停用',value: 0}
          ],
          onChange(){
          },
          required:true,
        },
        {
          name: "部门",
          type: "select",
          prop: "deptId",
          width: 24,
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [],
          onChange(){
          },
          required:true,
        },
        {
          name: "角色",
          type: "select",
          prop: "roleId",
          width: 24,
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [
          ],
          onChange(){
          },
          required:true,
        },
        {
          name: "集团",
          type: "select",
          prop: "groupId",
          width: 24,
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [],
          onChange(){
          },
          required:false,
        },
      ],
      editColumnPass: [
        {
          name: "密码",
          type: "text",
          prop: "password",
          width: 24,
          required:true,
        },
        
      ]
    };
  },
  created() {
    this.queryData();
  },
  mounted(){
    // this.getRoleList()
    // this.getDeptList()
    // this.getCompany()
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "编号",
            type: "text",
            prop: "id",
            align: "center"
          },
          {
            label: "登录名",
            type: "text",
            prop: "username",
            align: "center"
          },
          // {
          //   label: "手机号",
          //   type: "text",
          //   prop: "phone",
          //   align: "center"
          // },
          // {
          //   label: "真实姓名",
          //   type: "text",
          //   prop: "nick",
          //   align: "center"
          // },
          // {
          //   label: "状态",
          //   type: "other",
          //   prop: "state",
          //   align: "center",
          //   fnc: val => val==1? '启用' : '停用'
          // },
          // {
          //   label: "所属部门",
          //   type: "text",
          //   prop: "deptName",
          //   align: "center"
          // },
          {
            label: "角色",
            type: "text",
            prop: "roleId",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:220
          }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    async queryData() {
      let search = objectFilter({current:this.pager.current,size: this.pager.size,username:this.name})
      const res = await request({
        url: "/manage/user/query",
        method: "POST",
        data: search
      });
      this.tableData = res.data.records
      this.pager.total = res.data.total
      this.pager.current = res.data.current
    },
    // 部门
    async getDeptList(){
      let { list } = await request({
      url: "/sys/dept/select",
      method: "GET",
      data: {}
      });
      this.genre[4].optionList = list
      this.genre1[4].optionList = list
    },
    //角色
    async getRoleList(){
      let { list } = await request({
      url: "/sys/role/select",
      method: "GET",
      data: {}
      });
      this.genre[5].optionList = list
      this.genre1[5].optionList = list
    },
    async getCompany(){
      let { list } = await request({
      url: "/company/group/select",
      method: "POST",
      data: {}
      });
      this.genre[6].optionList =list
      this.genre1[6].optionList = list
    },
    pageChange(val) {
      this.pager.current = val;
      this.queryData();
    },
    changeSearch(key, val) {
      this[key] = val;
      this.pager.current = 1;
    },
    editStore(id){
      this.$router.push({ path: "/grate/group/info",query:{id:id} })
    },
    commentDetail(id){
      this.$router.push({ path: "/storeDetail",query:{id:id,type: "toview"} })
    },
    remove(id){
       this.$confirm('确认删除吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let del = await request({
        url: "/user/delete",
        method: "POST",
        dataType:'json',
        data: [id]
      });
       if(del.code !==0 )return
        this.$message.success('删除成功')
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.queryData()
      })
    },
    onCancel () {
      this.visible = false
    },
    onCancelPass(){
      this.visible1 = false
    },
    onSubmit() {
      this.$refs['configModal'].onSubmit()
    },
    onSubmitPass(){
      this.$refs['configModalPass'].onSubmit()
    },
    edit(rowData) {
      this.modalData = {...rowData}
      if(!rowData){
        this.editColumn = this.genre
      }else{
        this.editColumn = this.genre1
      }
      this.visible = true
      
    },
    editPass(rowData){
      this.modalData1 = {...rowData}
      this.visible1 = true
    },
    async updateData(values){
      let url, msg
      if (values.id){
        url = '/user/update'
        msg = '编辑成功'
      }else {
        url = '/user/add'
        msg = '添加成功'
      }
    let res = await request({
      url: url,
      method: 'POST',
      data: values
    })
    if (res.code !==0) return
     this.$message.success(msg)
      this.visible = false
      this.queryData()
    },
    async updateDataPass(values){
      let url, msg
      url = '/user/update'
      msg = '编辑成功'
      const {id, password } = values
      let res = await request({
        url: url,
        method: 'POST',
        data: {id, password}
      })
      if (res.code !==0) return
        this.$message.success(msg)
        this.visible1 = false
      },
  }
}
</script>
<style lang='scss' module>
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
</style>